<template>
	<view class="content">
		<view class="empty" v-if="childList.length == 0">
			<view>
				<image class="empty-img" src="../../static/default_address_none.png"></image>
			</view>
			<view>
				<view class="empty-text">您还没有添加学生信息，<view class="btnAddGood" @click="btnAddAddr">
					去添加
				</view></view>
				<!-- <button class="empty-btn" @click="onClickSee">去逛逛</button> -->
			</view>
			
		</view>
		<view  v-else class="itemGroup">
			
		 <uni-swipe-action>
		  <uni-swipe-action-item v-for="(item,index) in childList" :key="index" >
		  <view class="itemChild" >
		  	<view  class="comInfo">
		  		<view class="imgGroup" @click="btnGotoItem(index)">
		  			<image src="../../static/father.png" mode="widthFix"></image>
					<view class="lab1">编辑</view>
		  		</view>
		  		<view class="comInfoDetail">
		  			<view class="nihao">{{item.stuName}}</view>
		  			<view class="companyName">{{item.schoolName}}</view>
		  			<view class="infoSex">{{item.gradeName}}/{{item.className}}   {{item.sex | showSex}}</view>
		  		</view>
		  	</view>
		  	<view class="all_select_box" @click="btnChangeCheckbox(item.stuId)">
		  		<uni-icons :type="item.stuId == izDefaultIndexId?'checkbox-filled':'circle'" :color="item.stuId == izDefaultIndexId?'#5360FF':'#ccc'" size="25"></uni-icons>	
		  	</view>
		  </view>
		  <!--侧滑图标-->
		  <template v-slot:right>
		  	<view class="swipe-right" @click.stop="onRightClickDelete(item.stuId)">
		  		<view>删除</view>
		  	</view>
		  </template>
		</uni-swipe-action-item>
	   </uni-swipe-action>
		</view>
		<view class="btnGroup">
			<view class="btn" @click="btnAddAddr">
				添加
			</view>
		</view>
	</view>
</template>

<script>
	import {listStu,delStu,defaultStu} from '../../api/index.js'
	// import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	// import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		data() {
			return {
				childList:[],
				userId:undefined,
				isRefresh:true,
				izDefaultIndexId:''
				
			}
		},
		onLoad() {
			this.userId = getApp().globalData.userId
			
		},
		onShow(){
			if (this.isRefresh) {
		    this.isRefresh =false;
			this.listStus('');
				
			}
		},
		onBackPress() {
			let pages = getCurrentPages();
			let page = pages[0];
			page.$vm.isRefresh = true;
		},
		onPullDownRefresh() {
			this.listStus('');
			
		},
		methods: {
			async listStus(key){
				
				let {result} = await listStu({userId:this.userId});
				if (result == undefined || result == null) {
		            this.childList = [];
					
					
					
					return
					
				}else{
					
					this.childList = result;
					result.some((v,i)=>{
						// console.log('v.izDefault',v.izDefault)
						if (v.izDefault == '1') {
							
							this.izDefaultIndexId = v.stuId
							if (key&&key=='need') {
								
								getApp().globalData.stuId = v.stuId;
								uni.setStorage({
									key:'stuId',
									data:v.stuId
								})	
							}
							return
						}
						
					})
				}
			   

				uni.stopPullDownRefresh()
			
			},
			async NewDelStu(indexId){
				// console.log('手机号码',schoolCode)
			  	try{
					
					let {result} = await delStu({stuId:indexId,userId:this.userId});
					uni.showToast({
						icon:'none',
						title:'删除成功'
						
					},400)
					
					if(indexId == this.izDefaultIndexId){
						this.listStus('need');
					}else{
						this.listStus('');
					}

				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				}
			},
			async NewDefaultStu(stuId){
				// console.log('手机号码',schoolCode)
			  	try{
					
					let {result} = await defaultStu({willSetDefStuId:stuId,curDefStuId:this.izDefaultIndexId});
					uni.showToast({
						icon:'none',
						title:'切换成功'
						
					},400)
					
					this.izDefaultIndexId = stuId
					getApp().globalData.stuId = stuId;
					uni.setStorage({
						key:'stuId',
						data:stuId
					})
					
					
				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				}
			},
			btnGotoItem(index){
				
				
				let result = this.childList[index];
				uni.navigateTo({
					url:'../loginTwoInfutDetail/loginTwoInfutDetail?type=edit&itemInfo=' + encodeURIComponent(JSON.stringify(result))
				})
			},
			btnAddAddr(){
				uni.navigateTo({
					url:'../loginTwo/loginTwo'
				})
			},
			onRightClickDelete(indexId){
				
				this.NewDelStu(indexId);
				
				
			},
			btnChangeCheckbox(stuId){
				
				// debugger
				if (stuId == this.izDefaultIndexId) {
					return
				} else{
					this.NewDefaultStu(stuId);
				}
				
			}
		},
		// components: {
		// 	uniSwipeAction,
		// 	uniSwipeActionItem
		// },
		filters:{
			showSex: function(val){
				if(val == '1'){
					return '男'
				}else if(val == '2'){
					return '女'
				}else{
					return ''
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F8F9FD;
		height: 100%;
	}
.empty {

	margin-top: 200rpx;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	// background: #F4F4F4;

	.empty-img {
		margin-top: 45upx;
		width:300upx;
		height: 200upx;
	}

	.empty-text {
		margin-top: 10upx;
		font-size: 24upx;
		color: #ccc;
		display: flex;
		align-items: center;
		.btnAddGood{
			color: #333;
			font-size: 25upx;
		}
	}

	.empty-btn {
		margin-top: 24upx;
		width: 250upx;
		height: 70upx;
		font-size: 28upx;
		color: #FFFFFF;
		background-color: #DD524D;
	}
}
.itemGroup{
	padding: 0rpx 20rpx 170rpx;
	padding-bottom: calc(170rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
}
.swipe-right {
		/* width: 100%; */
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color:#dd524d ;
		font-size: 36rpx;
		color: #fff;
		width: 160rpx;
		height: 200rpx;
		// margin-left: -10rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
}
.itemChild{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFFFFF;
	height: 200rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding-right: 30rpx;
	width: 100%;
}
.comInfo{
	
	display: flex;
	margin: 20rpx 20rpx 0;
	
     .imgGroup{
		 width: 90rpx;
		 image{
		 	width:  90rpx;
		 	height: 90rpx;
		 	border-radius: 50%;
		 	
		 }
		 .lab1{
			 text-align: center;
			 color: #0005C9;
			 font-size: 22rpx;
			 width: 90rpx;
			 
		 }
	 }
	
	.comInfoDetail{
		
		margin-left: 20rpx;
		.nihao{
			color: #333;
			font-size: 32rpx;
			font-weight: 500;
		}
		.companyName{
			color: #333;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
		}
		.infoSex{
			color: #888888;
			font-size: 24rpx;
		}
		
	}
}
.btnGroup{
   position: fixed;
   bottom: 0;
   left: 0;
   width: 750rpx;
   // height: 160rpx;
   padding-bottom: 30rpx;
   padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
   padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
   // background-color: #fff;
   .btn{
	   color: #fff;
	   background: linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
	   box-shadow: 0px 2px 24px 0px rgba(80, 58, 225, 0.36);
	   height: 100rpx;
	   line-height: 100rpx;
	   border-radius: 50rpx;
	   margin: 20rpx 40rpx 0;
	   font-size: 32rpx;
	   text-align: center;
	   
   }
   
}

</style>
